<template>
  <div class="homefoot">
    <div class="title">
      <!-- <div
        class="flex"
        style="
          color: #1a1a1a;
          align-items: baseline;
          font-weight: bold;
          font-family: HelloFont WenYiHei;
        "
      >
        <div style="font-size: 48px">平台</div>
        <div style="font-size: 32px">优势</div>
        <div class="Horizontal"></div>
      </div>
      <div
        style="font-size: 24px; color: #1a1a1a; font-weight: 400"
        class="en-fonts"
      >
        Our Advantage
      </div> -->
      <img
			    src="@/assets/image/SEOcustomer/img／common／title／advantages@2x.png"
			    alt=""
			  		style="width:184px;height:88px;object-fit: cover;"
			  />
    </div>
    <div class="bodyRinges">
      <div class="advantage-item flex align">
        <img
          src="@/assets/image/pageHome/img-homepage-pictureRes-advantage01.webp"
          alt=""
          style="width: 736px; height: 520px;"
        />
        <div
          class="flex flex-direction justify-content"
          style="height: 100%; flex: 1; margin-left: 72px"
        >
          <div class="desc-item">
            <div class="desc-item-title">
              <img
                class="img-number"
                src="@/assets/image/pageHome/img1.png"
                alt=""
              />
              <p>&nbsp;·&nbsp;保证原创</p>
            </div>
            <div class="Horizontal"></div>
            <div class="textTittle">
              作为一家专业的推广平台，我们以“保证原创”为核心特色，致力于为用户提供独特、高质量的内容创作服务。内容团队人均4年以上营销推广经验，同时与各行业KOL达成战略合作协议，确保为您的企业和产品量身定制推广文稿，每一篇文稿都源于写手们独特的思考、深入的研究和精心的打磨。
            </div>
          </div>
        </div>
      </div>
      <div
        class="assistance-box flex align"
        style="width: 100%; height: 400px; margin-top: 120px"
      >
        <div class="lfetBOXar" style="">
          <div class="">
            <div class="desc-item">
              <div class="desc-item-title">
                <img
                  class="img-number"
                  src="@/assets/image/pageHome/tel1.png"
                  alt=""
                />
                <p>&nbsp;·&nbsp;AI辅助</p>
              </div>
              <div class="Horizontal"></div>
            </div>
          </div>
          <div
            style="
              font-family: Alibaba PuHuiTi-Regular;
              font-weight: 400;
              font-size: 20px;
              color: #808080;
              line-height: 36px;
            "
          >
            大模型提供拼写和语法检查、风格调整、自动摘要、文本生成和翻译支持。通过语义分析和校对建议，AI帮助编辑优化内容、丰富表达，并确保文章符合读者预期。
          </div>
        </div>
        <div
          class="rightBox"
          style="height: 100%; margin-left: 38px; width: 320px"
        >
          <!-- <div class="entitle">Assistance</div>
          <div
            class="mt-24 mb-24"
            style="font-weight: bold; font-size: 28px; color: #1a1a1a"
          >
            from
          </div>
          <div
            style="
              font-family: Poiret One, Poiret One;
              font-weight: 400;
              font-size: 32px;
              color: #1a1a1a;
            "
          >
            Artificial -
          </div>
          <div
            style="
              font-family: Poiret One, Poiret One;
              font-weight: 400;
              font-size: 32px;
              color: #1a1a1a;
            "
          >
            Intelligence
          </div> -->
        </div>
      </div>
      <div class="flex align" style="margin-top: 120px; position: relative">
        <div style="width: 736px; height: 736px; z-index: 1">
          <img
            src="@/assets/image/pageHome/img-homepage-pictureRes-advantage03.webp"
            alt=""
            style="width: 100%; height: 100%"
          />
        </div>
        <div style="z-index: 1">
          <div class="desc-item" style="margin-left: 72px">
            <div class="desc-item-title">
              <img
                class="img-number"
                src="@/assets/image/pageHome/file1.png"
                alt=""
              />&nbsp;·&nbsp;媒体矩阵
            </div>
            <div class="Horizontal"></div>
            <div class="textTittle">
              涵盖：新闻源媒体发布、软文营销推广、新闻稿文章撰写、微信营销、微博推广、海外媒体推广、问答推广、达人探店打卡、红书素人种草、KOL大V发帖等多种互联网广告。
            </div>
          </div>
        </div>
        <div class="item-bg"></div>
      </div>
      <div class="flex align" style="height: 520px; margin-top: 120px">
        <div
          class="flex flex-direction"
          style="
            width: 464px;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
          "
        >
          <div class="desc-item">
            <div class="desc-item-title">
              <img
                class="img-number"
                src="@/assets/image/pageHome/mes1.png"
                alt=""
              />&nbsp;·&nbsp;专家团队
            </div>
            <div class="Horizontal"></div>
            <div class="textTittle">
              100+专家团队,涵盖文字编辑&SEO专家&营销专家&网站运营团队等。全方位满足您的任何需求,为您解决难题。
            </div>
          </div>
        </div>
        <div style="width: 736px; height: 100%">
          <img
            src="@/assets/image/pageHome/img-homepage-pictureRes-advantage04.webp"
            alt=""
            style="width: 100%; height: 100%"
          />
        </div>
      </div>
    </div>
    <div class="aiseo-home-serviceProcess">
      <div class="buttonConsultation" @click="handleOpenChat">
        <div class="buttonConsultation-inner">
          看完了？点这里立即与客服沟通!
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import EventBus from "@/utils/eventBus.js";

const handleOpenChat = () => {
  EventBus.emit("openCustomerChat", {
    message: "您好，我想了解更多信息",
  });
};
</script>

<style lang="scss" scoped>
.homefoot {
  // width: 100vw;
  margin: 0 auto;
  width: $aiseoHomeWidth;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .en-fonts {
    font-family: Poiret One;
  }

  .Horizontal {
    width: 16px;
    height: 4px;
    background: #e62e3d;
    margin: 20px 0;
  }
}

.aiseo-home-serviceProcess {
  width: 100%;
  height: 319px;
  display: flex;
  align-items: center;
  justify-content: center;
  .buttonConsultation {
    margin: 120px auto;
    width: 528px;
    height: 79px;
    border-radius: 50px;
    border: 3px solid #1a1a1a;
    text-align: center;
    line-height: 79px;
    color: #1a1a1a;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease; /* 添加过渡效果 */
    .buttonConsultation-inner {
      width: 100%;
      height: 100%;
      border-radius: 40px;
      transition: all 0.3s ease; /* 添加过渡效果 */
    }
  }
  .buttonConsultation:hover {
    width: 716px;
    height: 87px;
    color: #ffffff;
    border: 3px solid #e62e3d;
    padding: 3px;
    box-sizing: border-box;
    transition: all 0.3s ease; /* 添加过渡效果 */

    .buttonConsultation-inner {
      background: #e62e3d;
      transition: all 0.3s ease; /* 添加过渡效果 */
    }
  }
}
.bodyRinges {
  width: 100%;
  .advantage-item{
    margin-top: 80px;
  }
  .img-number {
    height: 61px;
  }
  .desc-item {
    .desc-item-title {
      font-family: Alibaba PuHuiTi-Regular;
      font-weight: bold;
      font-size: 32px;
      color: #1a1a1a;
      display: flex;
	  align-items: center;
      p {
        line-height: 62px;
      }
    }
    .Horizontal {
      background: #1a1a1a;
    }
    .textTittle {
      width: 320px;
      font-family: Alibaba PuHuiTi-Regular;
      font-weight: 400;
      font-size: 20px;
      color: #808080;
      line-height: 36px;
    }
  }
  .item-bg {
    width: 1760px;
    height: 600px;
    background: #e6e6e6;
    position: absolute;
    left: -360px;
    top: 85px;
    z-index: 0;
  }
}
.Horizontal {
  width: 16px;
  height: 4px;
  background: #1a1a1a;
  margin-left: 5px;
}
.lfetBOXar {
  flex: 1;
  height: 100%;
  border: 2px solid #000000;
  padding: 60px 72px 0 60px;
  box-sizing: border-box;
}
.rightBox {
  padding: 0 0 0 68px;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: url(@/assets/image/pageHome/img／homepage／pictureRes／advantage02@2x.png);
  background-size: contain;
  .entitle {
    font-family: Ubuntu, Ubuntu;
    font-weight: bold;
    font-size: 36px;
    color: #1a1a1a;
  }
}
</style>
